<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增datax')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: jquery-smartwizard-css" />
    <th:block th:include="include :: select2-css" />
    <style type="text/css">
        /* 如果要让工具栏固定在页面底部,使用下面的样式,不需要的可以注释 */
        .sw>.toolbar-bottom{
            z-index: 100;
            bottom: 0px;
            left: 0;
            width: 100%;
            position: fixed;
            text-align: right;
            background: #fff;
            box-shadow: 0 -2px 6px 1px hsla(223,8%,83%,.5);
            border-top: 1px solid #e3e4e8;
        }
        /* 如果设置了是否自动调节高度为false,需要加滚动条 */
        .sw>.tab-content{
            overflow-x: hidden;
            overflow-y: auto;
        }
        /* 解决工具栏无法固定底部的问题（如果页面没有animated类可以不写这部分代码） */
        .animated {
            animation-fill-mode: none;
            -webkit-animation-fill-mode: none;
            -moz-animation-fill-mode: none;
            -o-animation-fill-mode: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title" style="margin: 0;padding: 5px 0 0 0">
                    <form class="form form-horizontal m-t" style="margin: 0;padding: 0">
                    <div class="form-group" style="width: 700px;padding: 0;margin: 0">
                        <label class="col-sm-2 control-label">源数据库：</label>
                        <div class="col-sm-4">
                            <select name="idDb" id="idDb" style="margin-bottom: 5px" class="form-control m-b" th:with="type=${@baseDbService.selectAll()}" onchange="dbChange()">
                                <option th:each="item : ${type}" th:text="${item.na}" th:value="${item.idDb}" th:attr="cd=${item.cd}" th:if="${item.sdBuscls!='dw'}"></option>
                            </select>
                        </div>
                        <label class="col-sm-2 control-label">目标库：</label>
                        <div class="col-sm-4">
                            <select name="idDb" id="dwIdDb" disabled style="margin-bottom: 5px" class="form-control m-b" th:with="type=${@baseDbService.selectAll()}" onchange="dbChange()">
                                <option th:each="item : ${type}" th:text="${item.na}" th:value="${item.idDb}" th:if="${item.sdBuscls=='dw'}"></option>
                            </select>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="ibox-content">
                    <div id="smartwizard">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#step-1"> 第一步 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-2"> 第二步 </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1" style="min-height: 500px">
                                <div>
                                    <form class="form form-horizontal m-t">
                                        <div class="form-group" >
                                            <label class="col-sm-2 control-label">数据库名：</label>
                                            <div class="col-sm-2" >
                                                <label class="checkbox-inline">
                                                    <input type="checkbox" value="option1" onclick="checkAll(this)">全选</label><br/><br/>
                                            </div>
                                            <div class="col-sm-3">
                                                <input type="text" id="prefix" class="form-control" placeholder="按ENTER键做前缀过滤">
                                            </div>
                                            <div class="col-sm-5"></div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-12" id="checkBoxDiv" >
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                <div>
                                    <form class="form form-horizontal m-t">
                                        <div class="form-group" >
                                            <label class="col-sm-2 control-label">原表：</label>
                                            <div class="col-sm-9" >
                                                <div id="checkBoxDiv_sour" ></div>
                                            </div>
                                        </div>
                                        <div class="form-group" >
                                            <label class="col-sm-2 control-label">目标表：</label>
                                            <div class="col-sm-9" >
                                                <div id="checkBoxDiv_tar" ></div>
                                            </div>
                                        </div>
                                        <div class="form-group" >
                                            <label class="col-sm-2 control-label">无效表：</label>
                                            <div class="col-sm-9" >
                                                <div id="checkBoxDiv_inva" style="color: darkgray"></div><br/>
                                                <p style="color: red">需在数据仓库创建”ods_系统编码_表名“的目标表</p>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: jquery-smartwizard-js" />
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "etl/datax";
        var GLOBAL_TABLES = [];
        var GLOBAL_ODS_TABLES = [];
        $(document).ready(function() {
            $("#prefix").keyup(function (event) {
                if(event.keyCode==13) {
                    filterTables();
                }
            });
            dbChange();
            odsTables();
            // 工具栏按钮
            var btnFinish = $('<a id="btn-finish"></a>').text('完成')
                .addClass('btn btn-info')
                .on('click', function(){ submit(); });
            var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
                .addClass('btn btn-danger')
                .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
            // 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
            var btnNext = $('<a id="btn-next"></a>').text('下一步')
                .addClass('btn btn-info')
                .on('click', function(){ $('#smartwizard').smartWizard("next");});
            var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
                .addClass('btn btn-success disabled')
                .on('click', function(){ $('#smartwizard').smartWizard("prev"); });
            // 初始化表单向导组件
            $('#smartwizard').smartWizard({
                theme: 'arrows', // default, arrows, dots, progress
                autoAdjustHeight : false, // 自动调整高度, 默认true
                enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
                transition: {
                    animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
                },
                toolbarSettings: {
                    showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                    showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                    toolbarExtraButtons: [btnCancel,btnPrev,btnNext,btnFinish]// 扩展的按钮集合
                }
            });
        });

        function submit(){
            var data = {};
            $('.form').each(function (index, form){
                // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
                $.each($(form).serializeArray(), function(i, field) {
                    if(data[field.name]) {
                        data[field.name] += ("," + field.value);
                    } else {
                        data[field.name] = field.value;
                    }
                });
            });
            alert(JSON.stringify(data))
        }
        // 显示步骤时将触发事件
        $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
            // 下面按钮是快速操作栏的
            $("#prev-btn").removeClass('disabled');
            $("#next-btn").removeClass('disabled');
            // 下面按钮是工具栏的
            $("#btn-prev").removeClass('disabled');
            $("#btn-next").removeClass('disabled');
            $("#btn-finish").removeClass('disabled');
            if(stepPosition === 'first') {
                $("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
                $("#btn-prev").addClass('disabled');
                $("#btn-finish").addClass('disabled');
            } else if(stepPosition === 'last') {
                $("#next-btn").addClass('disabled');// 快速操作栏（演示用）
                $("#btn-next").addClass('disabled');
            } else {
                $("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
                $("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
                $("#btn-prev").removeClass('disabled');
                $("#btn-next").removeClass('disabled');
                $("#btn-finish").addClass('disabled');
            }
        });

        // 该事件在离开某个步骤之前触发
        $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
            if(stepDirection == 'forward' && nextStepNumber==1){
                debugger;
                var checkes = $("#checkBoxDiv").find("input:checked");
                debugger;
                if(checkes.length<1) {
                    $.modal.alertError("至少选择一个表");
                    return false;
                } else {
                    // 与ods_系统_表配置的
                    var sourCheckBox="",tarCheckBox="",invaCheckBox="";
                    var cdSys = $("#idDb").find("option:checked").attr("cd");
                    let tablename,odsTable;
                    $.each(checkes,function (index,item) {
                        tablename = $(item).val();
                        odsTable = "ods_"+cdSys+"_"+tablename;
                        if($.inArray(odsTable, GLOBAL_ODS_TABLES) !== -1) {
                            sourCheckBox += "<label class=\"checkbox-inline\"><input type=\"hidden\" value=\""+tablename+"\" >"+tablename+"</label>";
                            tarCheckBox += "<label class=\"checkbox-inline\"><input type=\"hidden\" value=\""+tablename+"\" >"+odsTable+"</label>";
                        } else {
                            invaCheckBox += "<label class=\"checkbox-inline\"><input type=\"hidden\" value=\""+tablename+"\" >"+tablename+"</label>";
                        }
                    });
                    $("#checkBoxDiv_sour").html(sourCheckBox);
                    $("#checkBoxDiv_tar").html(tarCheckBox);
                    $("#checkBoxDiv_inva").html(invaCheckBox);
                }
                return true;
            }
            return true;
        });

        $("#theme-selector").on("change", function() {
            // Change theme
            var options = {
                theme : $(this).val()
            };
            $('#smartwizard').smartWizard("setOptions", options);
            return true;
        });

        $("#reset-btn").on("click", function() {
            // Reset wizard
            $('#smartwizard').smartWizard("reset");
            return true;
        });

        $("#prev-btn").on("click", function() {
            // Navigate previous
            $('#smartwizard').smartWizard("prev");
            return true;
        });

        $("#next-btn").on("click", function() {
            // Navigate next
            $('#smartwizard').smartWizard("next");
            return true;
        });

        $("#form-datax-add").validate({
            focusCleanup: true
        });
        function checkAll(ele) {
            var isChecked = $(ele).is(":checked");
            $("#checkBoxDiv").find("input").attr("checked",isChecked);
        }
        function filterTables() {
            var prefix = $("#prefix").val();
            var html ="";
            $.each(GLOBAL_TABLES,function (index,item) {
                if(prefix!="") {
                    if(item.toUpperCase().indexOf(prefix.toUpperCase())!=-1) {
                        html+="<label class=\"checkbox-inline\"><input type=\"checkbox\" value=\""+item+"\" >"+item+"</label>";
                    }
                } else {
                    html+="<label class=\"checkbox-inline\"><input type=\"checkbox\" value=\""+item+"\" >"+item+"</label>";
                }
            });
            $("#checkBoxDiv").html(html);
        }
        function dbChange() {
           var idDb = $("#idDb").val();
            $.ajax({
                url: ctx+"base/db/queryTables?idDb="+idDb,
                type: 'GET',
                success: function (result) {
                    var data = result.data;
                    GLOBAL_TABLES = data;
                    filterTables();
                    $.modal.closeLoading();
                }
            });
            $.modal.loading("取表中，请稍后");
        }

        function odsTables() {
            $.ajax({
                url: ctx+"base/db/queryDwTables?prefix=ODS_",
                type: 'GET',
                success: function (result) {
                    var data = result.data;
                    GLOBAL_ODS_TABLES = data;
                }
            });
        }

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-datax-add').serialize());
            }
        }

        $("input[name='dtSysCre']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='dtSysModi']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>
</body>
</html>